<template>
  <div class="app-container">
    <div class="app-head">
      <el-form>
        <el-row type="flex" justify="start">
          <el-col :span="6">
            <el-form-item label="策略编号" label-width="80px">
              <el-input v-model="tariffId" style="width:90%" size="mini" />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="策略名称" label-width="100px">
              <el-input v-model="name" style="width:90%" size="mini" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="计费渠道" label-width="100px">
              <el-select v-model="payType" multiple style="width:90%" size="mini" placeholder="请选择">
                <el-option v-for="item of pay" :key="item.billingChannelId" :value="item.billingChannelId" :label="item.billingChannelName" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="1" class="absolute main-button">
            <el-button
              v-powerbtn="{power:'business-tactics-search'}"
              size="mini"
              type="primary"
              round
              icon="el-icon-search"
              @click="loadList"
            >查询</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="计费周期" label-width="80px">
              <el-input v-model="cycle" style="width:90%" size="mini" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <el-form-item label="是否关联节目" label-width="100px">
              <el-select v-model="connect" style="width:90%" size="mini" placeholder="请选择">
                <el-option value="" label="全部" />
                <el-option value="0" label="未关联" />
                <el-option value="1" label="已关联" />
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="6">
            <el-form-item label="价格" label-width="100px">
              <el-input v-model="price" style="width:90%" size="mini" />
            </el-form-item>
          </el-col>
          <el-col :span="1" class="absolute main-button">
            <el-button
              size="mini"
              round
              icon="el-icon-refresh"
              @click="reset"
            >
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="addBtns">
      <el-button
        v-powerbtn="{power:'business-tactics-add'}"
        type="primary"
        size="mini"
        round
        icon="el-icon-circle-plus-outline"
        @click="add"
      >新增</el-button>
    </div>
    <div class="app-table">
      <el-table :data="list" border style="width: 100%">
        <el-table-column label="序号" width="50">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>

        <el-table-column label="策略编号">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.tariffId" :content="scope.row.tariffId" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.tariffId }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="策略名称">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.name" :content="scope.row.name" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.name }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="价格">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.price" :content="scope.row.price" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.price }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="计费周期">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.cycle" :content="scope.row.cycle" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.cycle }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="计费渠道">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.billingChannelName" :content="scope.row.billingChannelName" placement="top" trigger="hover">
              <span slot="reference" style="cursor:pointer">{{ scope.row.billingChannelName }}</span>
            </el-popover>
          </template>
        </el-table-column>

        <!-- <el-table-column label="是否关联产品">
          <template slot-scope="scope">
            {{ scope.row.associatedProgram === '0' ? '未关联' : '已关联' }}
          </template>
        </el-table-column> -->

        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
            <!-- <el-button
              type="primary"
              style="margin-left:0"
              size="mini"
              round
              icon="el-icon-edit"
              @click="edit(scope.row.id)"
            >编辑</el-button> -->
            <el-button
              v-powerbtn="{power:'business-tactics-find'}"
              type="primary"
              style="margin-left:0"
              size="mini"
              round
              plain
              @click="watch(scope.row.id)"
            >查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination :current-page="pageid" :page-sizes="[20,50,100]" :page-size="pagecount" :total="count" background highlight-current-row layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
    <watch-info :watch-dialog="watchDialog" :watch-id="watchId" @closeWatch="closeWatch" />
    <add-expenses :add-dialog="addDialog" :pay-select="paySelect" @closeAdd="closeAdd" />
    <edit-expenses :edit-dialog="editDialog" :watch-id="watchId" :pay-select="paySelect" @closeEdit="closeEdit" />
  </div>
</template>

<script>
import { getList, selectDown } from '@/api/expenses.js'
import watchInfo from './components/watch.vue'
import { mapGetters } from 'vuex'
import addExpenses from './components/add.vue'
import powerbtn from '@/directive/powerbtn/index.js'
import editExpenses from './components/edit.vue'
export default {
  directives: {
    powerbtn
  },
  components: {
    watchInfo: watchInfo,
    addExpenses: addExpenses,
    editExpenses: editExpenses
  },
  data() {
    return {
      list: [], // 请求列表
      tariffId: '', // 策略编号
      name: '', // 策略名称
      flag: true,
      platformArr: [],
      price: '', // 价格
      cycle: '', // 计费周期
      payType: '', // 支付渠道
      pay: [], // 支付渠道下拉
      connect: '', // 关联节目下拉
      associatedProgram: '', // 是否关联产品
      pageid: 1, // 当前页数
      pagecount: 20, // 每页可显示条数
      status: false, // 请求状态
      watchDialog: false, // 查看遮罩
      editDialog: false, // 编辑遮罩
      watchId: 0, // 策略id
      count: 0, // 总数量
      addDialog: false, // 新增遮罩
      paySelect: []
    }
  },
  computed: {
    ...mapGetters(['plat'])
  },
  mounted() {
    if (this.plat.length > 1) {
      this.platformArr = this.plat.map(item => {
        var len = item.powerCode.lastIndexOf('-')
        item.idVal = item.powerCode.substr(len + 1)
        return item.idVal
      })
    }
    if (this.plat.length === 1) {
      var sina = this.plat[0].powerCode.lastIndexOf('-')
      this.platformArr = this.plat[0].powerCode.substr(sina + 1)
    }
    this.loadList()
    this.getSelect()
  },
  methods: {
    // 请求列表
    loadList() {
      this.pageid = 1
      const request = {
        tariffId: this.tariffId, // 策略编号
        name: this.name, // 策略名称
        price: this.price, // 价格
        cycle: this.cycle, // 计费周期
        billingChannelId: this.payType.join(','), // 支付渠道
        // associatedProgram: this.associatedProgram, // 是否关联产品
        pageid: 1, // 当前页数
        pagecount: 20 // 每页可显示条数
      }
      getList(request).then(res => {
        if (res.resultCode === '0000') {
          this.list = res.data.list
          this.count = parseInt(res.data.count) // 总数量
          /* if (this.list.length > 0) {
            this.pageid = parseInt(res.data.list[0].pageid) // 当前页数
          } */
          this.status = true
        }
      }).catch(() => {
        this.$message({
          message: '请求列表失败',
          type: 'error'
        })
      })
    },

    reset() {
      this.tariffId = ''
      this.name = ''
      this.price = ''
      this.cycle = ''
      this.payType = []
    },
    // 请求支付渠道下拉
    getSelect() {
      selectDown({ platformId: Array.isArray(this.platformArr) ? this.platformArr.join(',') : this.platformArr }).then(res => {
        if (res.resultCode === '0000') {
          this.pay = res.data.list
        }
      })
    },

    // 当前页面显示条数改变时
    handleSizeChange(num) {
      this.flag = false
      const request = {
        tariffId: this.tariffId, // 策略编号
        name: this.name, // 策略名称
        price: this.price, // 价格
        cycle: this.cycle, // 计费周期
        billingChannelId: this.payType.join(','), // 支付渠道
        pageid: 1, // 当前页数
        pagecount: num // 每页可显示条数
      }
      console.log('请求数据')
      console.log(request)
      getList(request).then(res => {
        this.list = res.data.list // 列表项
        this.count = parseInt(res.data.count) // 总数量
        this.pageid = 1
        this.pagecount = num
        this.flag = true
      })
    },

    // 跳转某页
    handleCurrentChange(num) {
      console.log(num)
      this.pageid = num // 当前页数
      const request = {
        tariffId: this.tariffId, // 策略编号
        name: this.name, // 策略名称
        price: this.price, // 价格
        cycle: this.cycle, // 计费周期
        billingChannelId: this.payType.join(','), // 支付渠道
        pageid: num, // 当前页数
        pagecount: this.pagecount // 每页可显示条数
      }
      console.log('请求数据')
      console.log(request)
      // if (this.flag === true) {
      getList(request).then(response => {
        this.list = response.data.list // 列表项
        this.count = parseInt(response.data.count) // 总数量
        console.log('返回数据')
        console.log(response.data)
      })
      // }
    },

    // 查看
    watch(id) {
      this.watchDialog = true
      this.watchId = parseInt(id)
    },

    edit(id) {
      this.editDialog = true
      this.watchId = parseInt(id)
      this.paySelect = this.pay
    },

    // 关闭查看回调
    closeWatch() {
      this.watchDialog = false
    },

    // 新增
    add() {
      this.addDialog = true
      this.paySelect = this.pay
    },

    // 关闭新增回调
    closeAdd(val) {
      if (val === true) {
        this.loadList()
      }
      this.addDialog = false
    },

    closeEdit(val) {
      if (val === true) {
        this.loadList()
      }
      this.editDialog = false
    }
  }
}
</script>

<style scoped>
.addBtns{
  margin: 5px 0;
}
</style>
